<template>
<transition name="sliderUpHideRight">
    <div class="songsheet" ref="songsheet" v-show="showSongsheet" @scroll="scrollEvent">
        <div class="songheader">
            <i class="back icon-back" @click.stop="hideSongSheet"></i>
            <p class="title">歌单</p>
            <i class="search icon-search"></i>
            <i class="menu icon-list-circle"></i>
            <div class="songheaderimg" ref="songheader"></div>
        </div>
        <div class="conttent">
            <div class="top" ref="top">
                <div class="songsheetdisc">
                    <div class="songsheetimg">
                        <img :src="getSongSheet.info[0].img_url" v-if="getSongSheet.info" alt="">
                        <span class="info" @click.stop="showDownload">i</span>
                    </div>
                    <div class="disc">
                        <p class="songsheetname" v-if="getSongSheet">{{getSongSheet.name}}</p>
                        <div class="user">
                            <img :src="getSongSheet.user.avatar" v-if="getSongSheet.user" alt="" class="avatar">
                            <p class="songsheetuser" v-if="getSongSheet.user">{{getSongSheet.user.name}}</p>
                            <i class="icon-right"></i>
                        </div>
                    </div>
                </div>
                <div class="do">
                    <div class="list nocollect">
                        <i class="icon-music"></i>
                        <span class="idsc">收藏</span>
                    </div>
                    <div class="list">
                        <i class="icon-music"></i>
                        <span class="disc">评论</span>
                    </div>
                    <div class="list">
                        <i class="icon-music"></i>
                        <span class="disc">分享</span>
                    </div>
                    <div class="list">
                        <i class="icon-music"></i>
                        <span class="disc">下载</span>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="bottom-wrapper">
                    <div class="info" @click="playAll(0)">
                        <i class="icon-music"></i>
                        <span class="name">播放全部</span>
                        <span class="count">(共{{getSongSheet.count}}首)</span>
                    </div>
                    <div class="rightSetting">
                        <i class="icon-menu"></i>
                        <span>多选</span>
                    </div>
                </div>
                <div class="border-1px"></div>
                <songlist></songlist>
            </div>
        </div>
        <downloadimage @hidedownloadimage="hideDownloadImg" :show-image="showDownloadImage" :sheet-data="sheetData">
            <bottom-bar></bottom-bar>
        </downloadimage>
    </div>
</transition>
</template>

<script>
  export default {
    name: "songsheet"
  }
</script>

<style scoped>

</style>
